<template>
    <div class="mapBox">
        <!-- <BIGENAP ref="BIGENAP" id="mapBIGENAP" :baseId="$route.query.baseId" mapHeight="100vh" :configs="mapConfig"></BIGENAP> -->
        <mars3d ref="mars3ds" :linkBtn="false" :editor="true" :baseId="mapData" :lngLat="lngLat" height="100%"></mars3d>
    </div>
</template>

<script lang="ts" setup>
import mars3d from "@/components/mars3d.vue";
import { ref, reactive } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const mapConfig = reactive({
    isOpenEditor: true, // 是否打开编辑
    maxZoom: 18,
    mapUrl: "",
    zoom: 4,
    mapSource: "bigemap.arcgis-satellite",
});
const mapData = ref("");
const lngLat = ref([106.468095, 29.591354]);

mapData.value = (route as any).query.baseId;
console.log(route.query.baseId);
if (route.query.baseLatLng) {
    lngLat.value = JSON.parse((route as any).query.baseLatLng);
}
</script>

<style scoped="scoped">
.mapBox {
    width: 100%;
    /* margin-left: 20px; */
    overflow: hidden;
    height: 100vh;
    /* margin-bottom: 40px; */
}
</style>
